<!DOCTYPE html>
<html>
  <head>
    <title>form edit</title>
    <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
  </head>
  <body>

<div class="container">

<div class="row">
    <ol class="breadcrumb">
        <li><a href="/fd">表单设计器</a> <span class="divider">/</span></li>
        <li><a href="/fd/forms">实例</a> <span class="divider">/</span></li>
        <li><a href="/fd/form_data_list?id=<%= form.id %>">表单[<%= form.form_name %>]</a> <span class="divider">/</span></li>
        <li class="active">
        	<% if(formData.id) { %>
				编辑
			<% } else { %>
				添加
			<% } %>
        </li>
    </ol>
</div>

<div class="row">
<form name="fd_form" id="fd_data_form" action="/fd/data_edit" method="post">
<input type="hidden" value="<%= form.id %>" name="form_id">
<input type="hidden" value="<%= formData.id %>" name="id">

<p>
    标识
    <input type="text" class="form-control" placeholder="必填项" name="name" value="<%= formData.name %>">
</p>
<hr/>
<p>
    <%- design_content %>
</p>
<button type="submit" name="submit_to_save" value="save" class="btn btn-success">确定保存</button>
</form>


</div><!--end row-->
</div><!--end container-->

<block name="footer_js">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023"></script>
<!--script type="text/javascript" charset="utf-8" src="js/jquery.serializejson.min.js"></script-->

<!-- script start-->  
<script type="text/javascript">
    
    $(".upload").change(function(evt) {
        let target = evt.target;
        let fieldName = $(target).attr('input_name')
        let multiple = $(target).attr('multiple')
        let inputEle = $(`input[name='${fieldName}']`)
        let valueEle = $(`#${fieldName}_value`);
        let files = [];
        let formData = new FormData();
        if (target.file) {
            formData.append('file', target.file)
        }
        if (target.files) {
            Array.from(target.files).forEach(file => {
                formData.append('file', file)
            })
        }
        $.ajax({
            url: '/fd/upload',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (response) {
                if (multiple) {
                    let files = response.map(file => file.path)
                    inputEle.val(files.join(';'))
                } else {
                    inputEle.val(response.path)
                }
                valueEle.html(inputEle.val())
            },
            error: function (err) {}
        }) 

    });

    /*function submitData() {
        let data = $('#fd_data_form').serializeJSON();
        $.ajax({
            type: 'post',
            url: '/fd/data_edit',
            data,
            success: function(response) {
                console.log(response);
            }
        })
        console.log(data);
    }*/
</script>
<!-- script end -->

</block>

</body>
</html>